<template>
  <div class=" table-page">
    <info-bar class="position-r _info">
      <template slot="info-content">
        <div>
          <a-breadcrumb>
            <a-breadcrumb-item><a @click="$router.go(-1)">数据中心</a></a-breadcrumb-item>
            <a-breadcrumb-item>用户使用情况</a-breadcrumb-item>
          </a-breadcrumb>
        </div>
      </template>
    </info-bar>
    <div style="margin-top: 20px" >
      <div class="title">
        用户使用情况
        <a-button  @click="exportData" :loading="exportLoading" class="nbcs-btn-main-bg" style="position: absolute; right: 20px;">导出</a-button>
      </div>
      <a-table :columns="columns" :data-source="list" :pagination="pageConfig"  :loading="loading" :scroll="{ y: tableHeight }"> </a-table>
    </div>
  </div>
</template>
<script>
import InfoBar from '@/layouts/InfoBar.vue';
import { bigdataUserDetail,bigdataUserExport } from '@/services/bigdata.js';
import { exportExcel,blobToJson } from '@/utils/util';
export default {
  components: { InfoBar },
  data() {
    return {
      tableHeight:0,
      list: [],
      loading: false,
      exportLoading:false,
      columns: [
        { title: '姓名', dataIndex: 'userName', width: '15%' },
        { title: '账号', dataIndex: 'account', width: '15%' },
        { title: '所属组织', dataIndex: 'orgName', width: '35%' },
        { title: '总任务数', dataIndex: 'taskCount', width: '20%',defaultSortOrder: 'descend',sorter: (a, b) => a.taskCount - b.taskCount },
        { title: '文本检测任务数', dataIndex: 'textCount', width: '20%' ,defaultSortOrder: 'descend',sorter: (a, b) => a.textCount - b.textCount},
        { title: '图文检测任务数', dataIndex: 'imgTextCount', width: '20%' ,defaultSortOrder: 'descend',sorter: (a, b) => a.imgTextCount - b.imgTextCount},
        { title: '视频检测任务数', dataIndex: 'videoCount', width: '20%' ,defaultSortOrder: 'descend',sorter: (a, b) => a.videoCount - b.videoCount},
        { title: '图片检测任务数', dataIndex: 'imgCount', width: '20%' ,defaultSortOrder: 'descend',sorter: (a, b) => a.imgCount - b.imgCount},
        { title: '音频检测任务数', dataIndex: 'audioCount', width: '20%' ,defaultSortOrder: 'descend',sorter: (a, b) => a.audioCount - b.audioCount},
      ],
      pageConfig: {
        showQuickJumper: true,
        hideOnSinglePage: false, //只有一页时是否隐藏分页器
        showSizeChanger: true,
        defaultPageSize: 20,
        pageSizeOptions: ['20', '30', '50'],
        total: 0,
        current: 1,
        showTotal: total => {
          return `共 ${total} 条`;
        },
        onShowSizeChange: (page, pageSize) => {
          this.page.page = 1;
          this.page.pageSize = pageSize;
          this.getList(this.page, this.searchForm);
        },
        onChange: page => {
          this.page.page = page;
          this.pageConfig.current = page;
          this.getList(this.page, this.searchForm);
        }
      },
      searchForm: {
        date: [],
        appId: '',
        organId: ''
      },
      page: {
        page: 1,
        pageSize: 20
      }
    };
  },
  props: {},
  created() {
    this.searchForm.date = this.$route.query.date
    this.searchForm.appId = this.$route.query.appId
    this.searchForm.organId = this.$route.query.organId
    this.getList(this.page, this.searchForm)
    console.info(this.$route.query)
  },
  mounted() {
    this.tableHeight = document.querySelector('.table-page').clientHeight - 250;
  },
  methods: {
    getList(page, searchForm){
        let params = Object.assign(searchForm, page)
        bigdataUserDetail(
            params,
        ).then(res => {
        if(res.data.code == 0){
          const {data} = res.data;
          this.list = data.list
          this.pageConfig.total = data.totalRow
        }
      })
    },
    exportData() {
      this.exportLoading = true;
      bigdataUserExport(this.searchForm).then(res => {
        this.exportLoading = false;
        if (res.data.type == 'application/json') {
        blobToJson(res.data).then(res => {
          if (res.code == 401) {
            this.$message.warning('登录已失效，请重新登录');
            this.$router.replace({ path: '/login' });
          } else {
            this.$message.error(res.message);
          }
        });
      } else {
        exportExcel(res.data, '用户使用情况.xls');
      }
      });
    },
  },
};
</script>
<style scoped lang="less">
.title {
  height: 13px;
  display: flex;
  align-items: center;
  border-left: 4px solid #d43a3a;
  color: #000;
  font-size: 17px;
  padding-left: 10px;
  font-weight: bold;
  margin-bottom: 15px;
}
.table-page {
  .ant-table-wrapper {
    max-height: calc(100% - 150px);
  }
}
/* /deep/ .ant-table-tbody > tr > td {
  padding-top: 6px;
  padding-bottom: 6px;
} */
/* /deep/ .ant-spin-container {
  border-bottom: 1px solid #d8dee5;
} */
</style>
